<template>
  <div class="images">
    <ImageCard
      v-for="(url, index) in urls"
      :key="url + index"
      :url="url"
      @change="(v) => imageChange(index, v)"
      closeable
    />
  </div>
</template>
<script lang="ts">
import { toRefs, computed, PropType } from 'vue';
import { ImageCard } from '@/components';
import './index.less';

export default {
  emits: ['change'],
  components: {
    ImageCard,
  },
  props: {
    data: {
      type: Array as PropType<String[]>,
      default: () => [],
    },
    count: {
      type: Number,
      default: 1,
    },
  },

  setup(props, { emit }) {
    const { data, count: maxCount } = toRefs(props);

    const urls = computed(() => {
      if (data.value.length < maxCount.value) {
        return [...data.value.filter((v) => v !== ''), ''];
      }
      return data.value;
    });

    const imageChange = (i, v) => {
      urls.value.splice(i, 1, v);
      emit(
        'change',
        urls.value.filter((v) => v !== '')
      );
    };

    return {
      maxCount,
      urls,
      imageChange,
    };
  },
};
</script>
